<template>
	<view class="container">
		<!-- #ifndef MP -->
		<view>
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item,index) in proInfo.goodsSlideshow" :key="index" @tap="previewImage(index)">
						<view class="image-wrapper">
							<image :src="item.originalMedia" class="loaded" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="rushBuy" v-if="proInfo.countDown>0&&proInfo.isTimer">
				<image src="http://www.hnlxyj.com/wx/v2.0/static/image/icon/icon_time_img@2x.png" mode="widthFix"></image>
				<view>
					<text class="L">限时购</text>
					<text class="m">限时折扣,精品抢购</text>
					<text class="btn">已购 {{proInfo.countSales}} 件</text>
				</view>
				<view>
					<image src="http://www.hnlxyj.com/wx/v2.0/static/image/icon/icon_time_bg@2x.png" mode="widthFix" class="bg"></image>
					<view class="buy">
						<text class="w" :style="{width:1.3*proInfo.ratio+'rpx'}"></text>
						<text class="l">已购{{proInfo.ratio}}%</text>
					</view>
					<text class="time">距结束 {{proInfo.time}}</text>
				</view>
			</view>
			<view class="introduce-section">
				<view class="price-box" @tap="isShowChange">
					<text class="price-tip">¥</text>
					<text class="price">{{proInfo.isTimer==1?proInfo.timerMoney:proInfo.productmMinMoney}}</text>
					<text class="m-price" v-if="proInfo.agoraMoney">¥{{proInfo.agoraMoney}}</text>
					<!-- <text class="coupon-tip">7折</text> -->
					<!--1为联盟支付-->
				</view>
				<text class="title">{{proInfo.productName}}</text>
				<view class="bot-row">
					<text v-if="proInfo.expressConfig==2">快递: {{proInfo.postage}}</text>
					<text v-if="proInfo.expressConfig==1">快递:包邮</text>
					<text v-if="proInfo.expressConfig==3">快递:货到付款</text>
					<text>销量: {{proInfo.sumSales}}</text>
					<text>{{proInfo.province+proInfo.city}}</text>

				</view>
			</view>
			<!--  优惠 -->
			<view class="list" v-if="proInfo.isCoupon" @tap="couponList">
				<text>优惠券</text>
				<text class="r yticon icon-you" style="color:#ee3535">领券</text>
			</view>
			<!--  选择 -->
			<view class="list" @click="toggleSpec">
				<text>选择</text>
				<text v-for="(item,index) in specSelected" :key="index" style="color:#333;margin-left: 5px;">{{item}}</text>
				<text class="r yticon icon-you">规格数量</text>
			</view>

			<!-- 评价 -->

			<view class="eva-section">
				<view class="e-header" @tap="assess">
					<text class="tit">商品评价</text>
					<text>({{proInfo.sumEvaluation||0}})</text>
					<text class="tip">查看全部</text>
					<text class="yticon icon-you"></text>
				</view>
				<view class="eva-box" v-if="proInfo.evaluationList">
					<image class="portrait" :src="evaluationList.userHead" mode="aspectFill"></image>
					<view class="right">
						<view>
							<text class="name">{{evaluationList.isAnonymous==1?'匿名':evaluationList.mName}}</text>

							<uni-rate max="5" :value="evaluationList.description" disabled="true" color="#eee" active-color="#ee3434"></uni-rate>
						</view>

						<text class="con">{{evaluationList.createTime}}</text>
					</view>

				</view>
			</view>
			<view class="eva-box-content" v-if="evaluationList">
				<text>{{evaluationList.descContent}}</text>
				<view v-if="evaluationList.imgArr.length>0">
					<image :src="item" v-for="(item,index) in evaluationList.imgArr" :key="index"></image>
				</view>
			</view>

			<view class="detail-desc">
				<view class="d-header">
					<text>商品详情</text>
				</view>
				<view class="details">
					<u-parse :content="productdescribe" :imageProp="imageObj" :lazyLoad="true"></u-parse>
					<view class="clear" @tap="top">
						<view>
							<image :src="imgBase+'/static/top.png'" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="cus" v-show="cusBool">
				<view @tap="cus">在线客服</view>
				<view @tap="tel">客服电话</view>
				<view class="border"></view>
			</view>
			<!-- 底部操作菜单 -->
			<view class="page-bottom">
				<navigator :url="'/pages/seller/shopIndex?shopId='+proInfo.shopId" class="p-b-btn">
					<text class="yticon icon-xiatubiao--copy"></text>
					<text>店铺</text>
				</navigator>
				<view @tap="cusChange" class="p-b-btn">
					<image :src="imgBase+'/static/cus.png'" mode="widthFix"></image>
					<text>客服</text>
				</view>
				<view class="p-b-btn" :class="{active: favorite}">
					<text class="yticon icon-shoucang"></text>
					<text>收藏</text>
				</view>

				<view class="action-btn-group">
					<button type="primary" class=" action-btn no-border buy-now-btn" @tap="toggleSpec">加入购物车</button>
					<button type="primary" class=" action-btn no-border add-cart-btn" @tap="toggleSpec">立即购买</button>
				</view>
			</view>


			<!-- 规格-模态层弹窗 -->
			<view class="popup spec" :class="specClass" @click="toggleSpec">
				<view class="mask"></view>
				<view class="layer attr-content" @click.stop="stopPrevent">
					<view class="a-t" v-if="specList.length>0">
						<image :src="specImg"></image>
						<view class="right">
							<text class="price">¥{{proInfo.isTimer==1?proInfo.timerMoney:(specSelectObj.productmMoney?specSelectObj.productmMoney:proInfo.productmMinMoney)}}</text>
							<text class="stock">库存：{{specSelectObj.stock?specSelectObj.stock:proInfo.sumStock}}</text>
							<view class="selected" v-if="specSelected.length>0">
								已选：
								<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
									{{sItem}}
								</text>
							</view>
							<view class="selected" v-else>
								请选择:
								<text class="selected-text" v-for="(item,index) in specList" :key="index">
									{{item.name}}
								</text>
							</view>
						</view>
					</view>
					<view v-for="(item,index) in specList" :key="index" class="attr-list">
						<text>{{item.name}}</text>
						<view class="item-list">
							<view v-for="(childItem, childIndex) in item.key" :key="childIndex" :class="{selected: childItem.selected,dis:childItem.dis==2}"
							 @click="selectSpec(index,childIndex,childItem)" class="specItem">
								<image :src="childItem.specImg" v-if="childItem.specImg"></image>
								<text>{{childItem.value}}</text>
							</view>

						</view>
					</view>
					<view>
						<text>购买数量</text>
						<view class="r">
							<view class="left" @tap="proNumChange()">
								<text class="yticon icon--jianhao" :class="proNum==1?'uni-numbox-disabled': ''"></text>
							</view>
							<view>
								<text>{{proNum}}</text>
							</view>
							<view class="right" @tap="proNumChange('add')">
								<text class="yticon icon-jia2"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="foot" @click.stop="stopPrevent">
					<text class="btn" @tap="addCart">加入购物车</text>
					<text class="btn c" @tap="buyorder">立即购买</text>
				</view>
			</view>
			<!-- @show="togglePoster" -->
			<!-- 海报-模态层弹窗 v-if="posterShow"-->
			<wm-poster :imgSrc="imgSrc" :QrSrc="qrSrc" :Title="proInfo.productName" :PriceTxt="proInfo.isTimer==1?proInfo.timerMoney:proInfo.productmMinMoney"
			 :OriginalTxt="proInfo.agoraMoney" @show="togglePoster" :timeBean='proInfo.timeBean||-1' v-if="imgSrc&&posterShow&&qrSrc"
			 Width="500">
			</wm-poster>
		</view>
		
		<!-- #endif -->
	</view>
</template>

<script>
	import uParse from '@/pages/aduit/components/u-parse/u-parse.vue';
	import ajax from '@/common/request.js';
	import api from '@/common/api.js';
	var that = "";
	export default {
		components: {
			uParse,
		},
		data() {
			return {
				userInfo:{
					phone:""
				},
				imgSrc: "", //商品主图base64
				qrSrc: "", //二维码地址
				posterSrc: "", //海报的地址
				posterShow: false,
				isShow: false,
				show:false,
				shareObj: {}, //要分享的对象
				mid: "",
				shareId: "", //邀请码
				purchase: 0, //限购数，0为不限购
				proId: "",
				specList: [],
				specChildList: [],
				specSelectObj: {}, //选中的规格完整数据
				specSelected: [], //选中的规格属性集合
				specImg: "", //规格选中的图片，默认商品主图
				productdescribe: "", //商品详情
				proInfo: {
					shopProduct: {
						productmminmoney: "",
					},
					productMedia: [],
					productLess: {
						productdescribe: "",
					},
					evaluationList: ""
				},
				specClass: 'none',
				imageObj: {
					mode: "widthFix",
					padding: 10
				},
				shopName: "",
				evaluationList: "", //评价内容
				favorite: true, //是否收藏
				cusBool: false,
				proNum: 1, //默认的数量
				imgBase: "",
				carouselList: [],
				wx: '',
				isWx: false,
				userName: "",
				t: -1, //定时器
				isReq:true,//详情是否加载
			};
		},
		onHide() {
			if (that.t != -1) {
				clearInterval(that.t)
			}

		},
		onUnload() {
			if (that.t != -1) {
				clearInterval(that.t)
			}
		},
		onLoad(e) {
			that = this;
			that.imgBase = 'https://wx.hnlxyj.com/web/v2.0';
			that.proId = e.proId;
			that.shareId = e.shareId || "";
			if (that.shareId) {
				uni.setStorageSync('shareId', that.shareId);
			}
		},
		onShow() {
			that.mid = '61359';
			that.wx=that.userInfo.wxAccount;
			if (that.wx) {
				that.isWx = true
			}
			that.specSelected=[];
			that.cusBool = false;
			that.loadData()
		},
		methods: {
			togglePoster() {
				that.show=false;
				that.posterShow = !that.posterShow;
			},
			isShowChange() {
				that.isShow = !that.isShow;
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: that.carouselList,
					loop: true,
					indicator: "number",
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							uni.showLoading({
								title: '图片保存中...',
							})
							uni.getImageInfo({
								src: that.carouselList[data.index],
								success(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.path,
										success: function() {
											uni.hideLoading();
											api.msg("保存成功")
										}
									});
								}
							})
						}
					}
				});
			},
			couponList() {
				/* uni.navigateTo({
					url: "/pages/seller/shopIndex?type=2&shopId=" + that.proInfo.shopId
				}) */
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			fmt(value) {
				let result = parseInt(value)
				let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
				let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
				let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
				result = `${h}:${m}:${s}`
				return result
			},
			loadData() {
				ajax({
					url: "/shopProduct/queryGoodsDetails",
					method: "GET",
					data: {
						productId: that.proId,
						mid: that.mid
					},
					success(d) {
						that.proInfo = d;
						that.specLoad();
						if (that.proInfo.countDown) {
							that.$set(that.proInfo, "time", that.fmt(that.proInfo.countDown));
							that.t = setInterval(function() {
								that.$set(that.proInfo, "time", that.fmt(that.proInfo.countDown--));
							}, 1000)
						}
						that.specImg = d.originalImg;
						that.purchase = d.maxNum || 0;
						that.shareObj = {
							proDescribe: d.productName,
							proImg: d.originalImg,
							proLink: d.shareLinks,
							proName: d.productName
						};
						// #ifdef H5
						/* that.$wechat.share({
							shareObj: that.shareObj
						}); */
						// #endif 
						let arr = [];
						if (d.goodsEvaluation.length > 0) {
							//评价对象
							that.evaluationList = d.goodsEvaluation[0];
							that.evaluationList.mName = that.evaluationList.mName ? that.evaluationList.mName.substr(0, 2) + "***" : "匿名";
							that.evaluationList.createTime = api.format(that.evaluationList.createTime);
							if (that.evaluationList.imgs) {
								that.evaluationList.imgArr = that.evaluationList.imgs.split(",")
							} else {
								that.evaluationList.imgArr = [];
							}

						}
						if (d.isCollections == 0) {
							that.favorite = false;
						} else {
							that.favorite = true;
						}
						d.goodsSlideshow.forEach(item => {
							that.carouselList.push(item.originalMedia)
						});

					}
				})
			},
			specLoad() {
				ajax({
					url: "/shopProductSpecController/selectProductSpec",
					method: "GET",
					data: {
						productId: that.proId
					},
					success(d) {
						let obj = JSON.parse(d)
						that.specList = obj.specList;
						//排除库存为0的规格
						let arr = [];
						obj.specChildList.forEach(item => {
							if (item.key.length == 1 && item.stock == 0) {
								that.specList.forEach(i => {
									i.key.forEach(j => {
										if (j.value == item.key[0]) {
											that.$set(j, "dis", 2);
											that.$set(j, "initdis", 2)
										}
									})

								})
							}
							if (item.stock != 0) {
								arr.push(item)
							}
						})
						that.specChildList = arr
					}
				})
			},
			cusChange() {
				that.cusBool = !that.cusBool;
			},
			cus() {
				if (!that.mid) {
					api.msg("当前您还未登录,无法联系客服");
					return
				}
				uni.navigateTo({
					url: "/pages/web/webView?url=http://www.hnlxyj.com/wx/cs.html?mid=" + that.mid
				})
			},
			tel() {
				ajax({
					url: "/myMarchantShop/getSelectCustomerService",
					method: "GET",
					data: {
						shopId: that.proInfo.shopId
					},
					success(res) {
						uni.makePhoneCall({
							phoneNumber: res.servicephone //仅为示例
						});
					}
				})
			},
			//查看全部评价
			assess() {
				that.cusBool = false;
				uni.navigateTo({
					url: "assess?proid=" + that.proId
				})
			},
			//数量弹窗开关
			toggleSpec() {
				/* if (!that.mid||(!that.userInfo.phone)) {
					api.isLogin();
					return
				} */
				that.cusBool = false;
				if (that.specClass === 'show') {
					that.specClass = 'hide';
					setTimeout(() => {
						that.specClass = 'none';
					}, 250);
				} else if (that.specClass === 'none') {
					that.specClass = 'show';
				}
			},
			//选择数量
			proNumChange(type) {
				that.cusBool = false;
				if (type == "add") {
					if (that.purchase == 0 || that.proNum * 1 + 1 <= that.purchase) {
						++that.proNum
					} else {
						api.msg("当前最多可购数为" + that.purchase)
					}
				} else if (that.proNum - 1 > 0) {
					--that.proNum
				}
			},
			//选择规格
			selectSpec(index, childIndex, childItem) {
				//置灰不能选
				if (childItem.dis) {
					if (childItem.dis == 2) {
						return
					}
				}
				//选中的样式
				that.specList[index].key.forEach(item => {
					that.$set(item, "selected", false);
					if (!item.initdis) {
						that.$set(item, 'dis', 1);
					}

				})
				that.$set(that.specList[index].key[childIndex], 'selected', true);

				if (that.specList[index].key[childIndex].specImg) {
					that.specImg = that.specList[index].key[childIndex].specImg
				}
				//选中后的规格集合
				let arr = []; //点击筛选后的规格集合
				that.specChildList.forEach(item => {
					if (item.key[index] == childItem.value) {
						arr.push(item)
					}
				});
				that.specSelected = []; //选中的规格
				//判断是否为点击设置。防止数据覆盖
				that.specList.forEach(item => {
					item.key.forEach(i => {
						that.$set(i, "init", false)
					})
				})
				that.specList.forEach((item, specIndex) => {
					if (arr.length == 0) {
						item.key.forEach((kItem, kIndex) => {
							if (specIndex != index) {
								if (!kItem.init) { //判断是否为点击设置。防止数据覆盖
									that.$set(kItem, "dis", 2);
								}
							}
						})
					} else {
						arr.forEach((arrItem, arrIndex) => {
							//筛选后的属性值arrItem.key[specIndex]
							item.key.forEach((kItem, kIndex) => {
								if (specIndex != index) {
									if (arrItem.key[specIndex] == kItem.value) {

										that.$set(kItem, "dis", 1);
										that.$set(kItem, "init", true) //判断是否为点击设置。防止数据覆盖
									} else {
										if (!kItem.init) { //判断是否为点击设置。防止数据覆盖
											that.$set(kItem, "dis", 2);
										}

									}
								}

							})
						})
					}

				})

				that.specList.forEach(item => {
					item.key.forEach(i => {
						if (i.dis != 1 && i.selected) {
							that.$set(i, "selected", false); //取消选中
						}
					})
				})

				//查看选中的规格
				that.specList.forEach(item => {
					item.key.forEach(i => {
						if (i.selected) {
							that.specSelected.push(i.value)
						}
					})
				})
				//完整的规格选中只有一条
				if (that.specSelected.length == that.specList.length) {
					let obj = that.specSelected.join();
					that.specChildList.forEach(item => {
						let key = item.key.join()
						if (key == obj) {
							that.specSelectObj = item
						}
					})
				};
			},
			//添加至购物车
			addCart() {

				/* if (!that.mid||(!that.userInfo.phone)) {
					api.isLogin();
					return
				} */

				if (that.specList.length > 0) {
					if (that.specSelected.length != that.specList.length) {
						that.$util.msg("请选择规格");
						return
					}
				}
				that.cusBool = false;
				ajax({
					url: "/user/shoppingCart/addShoppingCart",
					data: {
						mid: that.mid,
						productId: that.proId,
						shopId: that.proInfo.shopId,
						productNum: that.proNum,
						wareUnit: that.specSelectObj.join,
						productSpecId: that.specSelectObj.specId,
						shareMid: that.shareId || ""
					},
					success(d) {
						that.toggleSpec()
						that.$util.msg("加入成功");

					}
				})
			},
			buyorder() {
				
				/* if (!that.mid||(!that.userInfo.phone)) {
					api.isLogin();
					return
				} */
							
				if (that.specList.length > 0) {
					if (that.specSelected.length != that.specList.length) {
						that.$util.msg("请选择规格");
						return
					}
				}
				that.cusBool = false; 
					 api.defAddress(function(item) {
						if (item) {
							var arr = [{
								productId: that.proId,
								tradeNum: that.proNum,
								shareMid: that.shareId || "",
								shopId: that.proInfo.shopId,
								productSpecId: that.specSelectObj.specId || "",
								wareUnit: that.specSelectObj.join || ""
							}]
							uni.navigateTo({
								url: `createOrder?arr=${JSON.stringify(arr)}`
							})
						}
					})
					
			
			},
			stopPrevent() {},
		},
		onShareAppMessage() {
			return {
				title: that.shareObj.proName,
				path: "/pages/product/product?proId=" + that.proId + "&shareId=" + that.mid,
				imageUrl: that.shareObj.proImg || "",
				desc: that.shareObj.proDescribe
			}
		},
		onPageScroll() {
			if (!that.productdescribe&&that.isReq) {
				that.isReq=false;
				ajax({
					url: "/shopProduct/queryGoodsImgDetails",
					method: "GET",
					data: {
						productId: that.proId
					},
					success(d) {
						that.productdescribe = d;
						that.isReq=true;
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	@import "@/common/aduit-yticon.css";
	page {
		background: $page-color-base;
		padding-bottom: 160rpx;
		min-height: 101vh;
	}

	.rushBuy {
		background: #f04235;
		height: 120rpx;
		padding: 24rpx 20rpx;
		color: #fff;
		position: relative;
		width: 100%;
		font-size: 18rpx;

		.buy {
			color: #fff;
			position: absolute;
			top: 26rpx;
			background: #ffb882;
			height: 28rpx;
			font-size: 18rpx;
			right: 30rpx;
			width: 130rpx;
			border-radius: 14rpx;
			text-align: center;

			.l {
				position: absolute;
				left: 30rpx;
			}

			.w {
				display: inline-block;
				background: linear-gradient(to right, #fca334, $font-color-theme);
				border-radius: 14rpx;
				width: 65rpx;
				/*13*0.1=10%*/
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.L {
			font-size: 30rpx;
			margin-right: 18rpx;
		}

		.m {
			font-size: 22rpx;
		}

		.btn {
			display: block;
			background: #c83131;
			line-height: 28rpx;
			text-align: center;
			border-radius: 14rpx;
			width: 140rpx;
			margin-top: 10rpx;
		}

		>image {
			display: inline-block;
			width: 72rpx;
			height: 72rpx;
			vertical-align: top;
			margin-right: 20rpx;
		}

		view {
			display: inline-block;
		}

		.bg {
			position: absolute;
			width: 236rpx;
			right: 0;
			top: 0;
		}

		.time {
			color: $font-color-theme;
			font-size: 12px;
			right: 20rpx;
			bottom: 28rpx;
			position: absolute;
		}
	}

	.uni-rate {
		display: inline-block;
		vertical-align: middle;
	}

	.popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		font-size: 30rpx;

		.wxBox {
			background: #fff;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			width: 690rpx;
			margin: 0 auto;
			position: relative;
			top: calc(50% - 220rpx);

			.title {
				text-align: center;
				font-size: 30rpx;
				margin-bottom: 40rpx;
			}
		}

		.item {
			text {
				display: inline-block;
				width: 150rpx;
			}

			input {
				display: inline-block;
				border-bottom: 1px solid #eee;
			}

			margin-bottom: 30rpx;
		}

		.btn {
			margin-top: 50rpx;
			text-align: center;

			text {
				display: inline-block;
				width: 200rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				color: #fff;
				background: $font-color-theme;
				border-radius: 50rpx;

				&.active {
					color: #333;
					background: rgb(238, 238, 238);
					margin-left: 40rpx;
				}
			}
		}
	}


	.r {
		float: right;
	}

	.icon-you {
		font-size: $font-base + 2rpx;
		color: #888;
	}

	.carousel {
		height: 750rpx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.comm {
		background: $font-color-theme;
		color: #fff;
		padding: 0 10rpx;
		border-radius: 50rpx;
		margin: 10rpx 0;
		display: inline-block;
		font-size: 28rpx;
	}

	/* 标题简介 */
	.share::after {
		border: none;
	}

	.introduce-section {
		background: #fff;
		padding: 20rpx 30rpx;

		.share {
			width: 110rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 22rpx;
			background: #f4f4f4;
			color: #999;
			border: none;
			border-top-left-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
			padding-left: 16rpx;
			margin: 0;
			margin-right: -30rpx;
			margin-top: -50rpx;
			padding-right: 0;

			.icon {
				margin-right: 0;
				vertical-align: middle;
				margin-top: -10rpx;
			}
		}

		.title {
			font-size: 32rpx;
			color: $font-color-light;
			line-height: 50rpx;
			width: 580rpx;

			display: inline-block;

			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.price-box {

			height: 64rpx;
			padding: 10rpx 0;
			font-size: 26rpx;
			color: $font-color-theme;
		}

		.price {
			font-size: $font-lg + 2rpx;
		}

		.m-price {
			margin: 0 12rpx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4rpx 10rpx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6rpx;
			line-height: 1;
			transform: translateY(-4rpx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50rpx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(to left, #fdf5f6, #fbebf6);
		padding: 12rpx 30rpx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70rpx;
			height: 30rpx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				left: -20rpx;
				top: -12rpx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10rpx;
		}

		.icon-bangzhu1 {
			padding: 10rpx;
			font-size: 30rpx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4rpx;
			color: $uni-color-primary;
		}
	}

	.list {
		line-height: 80rpx;
		background: #fff;
		margin: 20rpx 0;
		color: $font-color-dark;
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	.c-list {
		font-size: $font-sm + 2rpx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
		}

		.tit {
			width: 140rpx;
		}

		.con {
			flex: 1;
			color: $font-color-light;

			.selected-text {
				margin-right: 10rpx;
			}
		}

		.bz-list {
			height: 40rpx;
			font-size: $font-sm+2rpx;
			color: $font-color-light;

			text {
				display: inline-block;
				margin-right: 30rpx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-light;
			line-height: 40rpx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20rpx 32rpx;
		background: #fff;
		margin-top: 16rpx;
		padding-bottom: 0;

		.e-header {
			display: flex;
			align-items: center;
			height: 70rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2rpx;
				color: $font-color-light;
				margin-right: 4rpx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10rpx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20rpx 0;

		.portrait {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26rpx;

			.con {
				font-size: $font-base;
				color: $font-color-light;
			}
		}
	}

	.eva-box-content {
		background: #fff;
		padding: 0 30rpx 30rpx;
		font-size: 28rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 30rpx;
		}
	}

	/*  详情 */
	.clear {
		clear: both;

		view {
			width: 64rpx;
			height: 64rpx;
			background: #fff;
			border-radius: 50%;
			right: 30rpx;
			position: fixed;
			bottom: 140rpx;
		}

		image {

			width: 64rpx !important;
		}
	}

	.detail-desc {
		background: #fff;
		margin-top: 16rpx;

		.details {
			padding: 30rpx;

			image {
				float: left;
			}
		}

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #eee;
			height: 80rpx;
			font-size: $font-base + 2rpx;
			color: $font-color-light;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10rpx 30rpx;

		.a-t {
			display: flex;

			image {
				width: 170rpx;
				height: 170rpx;
				flex-shrink: 0;
				border-radius: 8rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24rpx;
				font-size: $font-sm + 2rpx;
				color: $font-color-base;
				line-height: 42rpx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10rpx;
				}

				.selected-text {
					margin-right: 10rpx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2rpx;
			color: $font-color-base;
			padding-top: 30rpx;
			padding-left: 10rpx;
		}

		.item-list {
			padding: 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;

			.specItem {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f5f5f5;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				min-width: 60rpx;
				height: 60rpx;
				padding: 0 10rpx;
				font-size: $font-base;
				color: $font-color-light;

				image {
					width: 46rpx;
					height: 46rpx;
					margin-right: 10rpx;
					vertical-align: middle;
				}
			}

			.dis {
				color: #999;
			}

			.selected {
				background: $font-color-theme;
				color: #fff;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
				max-height: 400px;
				overflow: scroll;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			padding: 30rpx 30rpx;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			padding-bottom: 150rpx;
		}

		.foot {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			line-height: 90rpx;
			text-align: left;
			animation: showLayer 0.2s linear both;
			color: #fff;
			font-size: 24rpx;
			z-index: 100;

			.btn {
				background: #f90;
				width: 50%;
				text-align: center;
				display: inline-block;
			}

			.c {
				background: $font-color-theme;
			}
		}


		.r {
			view {
				display: inline-block;
				width: 74rpx;
				text-align: center;
				line-height: 80rpx;
				height: 80rpx;
				border: 1px solid #eee;
			}

			.left {
				border-top-left-radius: 6rpx;
				border-right: none;
				border-bottom-left-radius: 6rpx;
			}

			.right {
				border-top-right-radius: 6rpx;
				border-left: none;
				border-bottom-right-radius: 6rpx;
			}

			.uni-numbox-disabled {
				color: #d6d6d6;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .5);

		image {
			width: 48rpx;
		}

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;
			height: 80rpx;

			.yticon {
				font-size: 40rpx;
				line-height: 48rpx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $font-color-theme;
			}

			.icon-fenxiang2 {
				font-size: 42rpx;
				transform: translateY(-2rpx);
			}

			.icon-shoucang {
				font-size: 46rpx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76rpx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20rpx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28rpx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	/* 客服 */
	.cus {
		border-radius: 10rpx;
		z-index: 100;
		font-size: 28rpx;
		position: fixed;
		bottom: 146rpx;
		left: 160rpx;
		border: 1px solid #eee;
		border-bottom: none;

		view {
			background: #fff;
			padding: 20rpx;
			border-bottom: 1px solid #eee;
		}

		.border {
			background: transparent;
			position: absolute;
			left: 10rpx;
			padding: 0;
			width: 0;
			height: 0;
			border: 20rpx solid;
			border-color: #fff transparent transparent transparent;
		}
	}
</style>
